<template>
    <div>
        <el-card>
            <!--      搜索与添加区域-->
            <el-row :gutter="20" style="margin-bottom: 10px">
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="queryInfo.searchInfo" clearable @clear="getSortList">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <div align="right">
                    <el-button @click="createDialog()" :enterable="false" type="primary" size="small">新增</el-button>
                </div>
            </el-row>
            <!--        表格-->
            <el-table

                    :data="pageuserlist"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        type="index"
                        prop="sortId"
                        label="#">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="sortName"
                        label="分类名称"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="sortInfo"
                        label="分类信息"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="300px"
                >
                    <template slot-scope="scope">
                        <el-button @click="showEditDialog(scope.row)" :enterable="false" size="small">查看</el-button>
                        <el-button @click="editEditDialog(scope.row)" :enterable="false" type="primary" size="small">编辑</el-button>
                        <el-button @click="deleteSort(scope.row)" :enterable="false" type="danger" size="small">删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--    查看分类信息的对话框-->
        <el-dialog
                title="查看垃圾信息"
                :visible.sync="showDialogVisible"
                width="50%" @close="showDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" ref="editFormRef" status-icon label-width="100px">
                <el-form-item prop="sortName" label="分类名称">
                    <el-input class="rt-input" v-model="editForm.sortName" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item prop="sortInfo" label="分类信息">
                    <el-input class="rt-input" v-model="editForm.sortInfo" autocomplete="off" disabled></el-input>
                </el-form-item>
            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showDialogClosed">确定</el-button>
            </span>
        </el-dialog>
        <!--    修改分类信息的对话框-->
        <el-dialog
                title="修改垃圾信息"
                :visible.sync="editDialogVisible"
                width="50%" @close="editDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" status-icon ref="editFormRef" label-width="100px" enctype="multipart/form-data">
                <el-form-item prop="sortId" label="分类编号">
                    <el-input class="rt-input" v-model="editForm.sortId" disabled></el-input>
                </el-form-item>
                <el-form-item prop="sortName" :rules="[{ required: true, message: '名称不能为空'}]" label="分类名称">
                    <el-input class="rt-input" v-model="editForm.sortName"></el-input>
                </el-form-item>
                <el-form-item prop="sortInfo" label="信息">
                    <el-input class="rt-input" v-model="editForm.sortInfo"></el-input>
                </el-form-item>
            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetEdit">重置修改</el-button>
              <el-button type="primary" @click="editGarbage">确定修改</el-button>
            </span>
        </el-dialog>
        <!--            新增垃圾信息的对话框-->
        <el-dialog
                title="新增分类信息"
                :visible.sync="createDialogVisible"
                width="50%" @close="createDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" ref="editFormRef" status-icon label-width="100px">
                <el-form-item prop="sortName" :rules="[{ required: true, message: '名称不能为空'}]" label="分类名称">
                    <el-input class="rt-input" v-model=editForm.sortName></el-input>
                </el-form-item>
                <el-form-item prop="sortInfo"  label="信息">
                    <el-input class="rt-input" v-model=editForm.sortInfo></el-input>
                </el-form-item>
            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetCreate">重置</el-button>
              <el-button @click="createGarbage" type="primary">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                total: 0,
                sortData: [],
                queryInfo: {
                    searchInfo: '',
                    // 当前页数
                    pagenum: 1,
                    pagesize: 10
                },
                row: '',
                showDialogVisible: false,
                editDialogVisible: false,
                createDialogVisible: false,
                editForm: {
                    "sortId": '',
                    "sortName": '',
                    "sortInfo": '',
                }
            }
        },
        created() {
            this.getSortList();
        },
        methods: {
            async getSortList() {
                const {data: res} = await this.$http.get('/sort/showAll')
                console.log(res)
                if (res.status !== 200) {
                    return this.$message.error(res.msg+'，获取分类信息列表失败!')
                }
                 //if (res.status == 200) {
                 //    this.$message.success('获取分类信息列表成功!')
                 //}
                this.sortData = res.data
                this.total = res.data.length
                console.log(res.data)
            },
            resetEdit() {
                const row = this.row
                this.editForm.sortId = row.sortId
                this.editForm.sortName = row.sortName
                this.editForm.sortInfo = row.sortInfo
                // console.log(this.garbageData())
                // this.editDialogVisible = false
            },
            resetCreate() {
                this.editForm.sortId = null
                this.editForm.sortName = null
                this.editForm.sortInfo = null
            },
            handleClick(row) {
                console.log(row);
            },

            // 查看分类信息的对话框
            showEditDialog(row) {
                console.log(row)
                this.showDialogVisible = true
                this.$nextTick(() => {
                    this.editForm.sortId = row.sortId
                    this.editForm.sortName = row.sortName
                    this.editForm.sortInfo = row.sortInfo
                    this.row = row
                })
            },
            // 编辑分类信息的对话框
            editEditDialog(row) {
                this.editDialogVisible = true
                this.editForm.sortId = row.sortId
                this.editForm.sortName = row.sortName
                this.editForm.sortInfo = row.sortInfo
                this.row = row
            },
            showDialogClosed() {
                // this.$refs.editFormRef.resetFields()

                this.showDialogVisible = false
            },
            editDialogClosed() {
                // this.$refs.editFormRef.resetFields()
                this.editDialogVisible = false
            },
            createDialogClosed() {

                // this.$refs.editFormRef.resetFields()
                this.createDialogVisible = false
            },
            // 监听 pagesize 改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                // alert(newSize)
                this.getSortList()
            },
            // 监听页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage)
                // alert(newPage)
                this.queryInfo.pagenum = newPage
                this.getSortList()
            },
            // 修改垃圾信息
            editGarbage() {

                this.$refs.editFormRef.validate(async valid => {
                    if (!valid) return
                    // const base64 = reader.readAsDataURL(this.file); //Base6
                    const {data: res} = await this.$http.put('/sort/update', {
                        sortId: this.editForm.sortId,
                        sortName: this.editForm.sortName,
                        sortInfo: this.editForm.sortInfo,
                    })
                    if (res.status !== 200) {
                        return this.$message.error(res.msg + '，修改失败!')
                    }
                    this.$message.success('修改成功！')
                    this.editDialogVisible = false
                    this.getSortList()
                })
            },
            createDialog() {
                this.createDialogVisible = true
                this.editForm.sortId = null
                this.editForm.sortName = null
                this.editForm.sortInfo = null
            },
            createGarbage() {
                this.$refs.editFormRef.validate(async valid => {
                    // console.log(valid)
                    if (!valid) return
                    const {data: res} = await this.$http.post('/sort/create', {
                        sortName: this.editForm.sortName,
                        sortInfo: this.editForm.sortInfo
                    })
                    if (res.status !== 200) {
                        return this.$message.error(res.msg + '，创建失败!')
                    }
                    this.$message.success('创建成功！')
                    this.createDialogVisible = false
                    this.getSortList()
                })
            },
            // 删除垃圾信息
            deleteSort(row) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.$refs.editFormRef.validate(async valid => {
                        const sortId = row.sortId
                        const {data: res} = await this.$http.delete('/sort/delete/' + sortId)
                        this.getSortList()


                    }).catch(() => {
                        this.getSortList()
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                })
            }
        },

        computed: {
            pageuserlist: function () {
                var search = this.queryInfo.searchInfo
                if (search) {
                    return this.sortData.filter(function (data) {
                        return Object.keys(data).some(function (key) {
                            return String(data[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.sortData.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
            }
        }
    }
</script>
